<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />
    <title>众鸿计划</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/axios.js"></script>
    <script src="./js/flexble.js"></script>
    <script src="./js/vue3.js"></script>
</head>
<body> 
    <div class="box" id="app">
        <div class="box-header">
            <div class="box-header-description"></div>
        </div>
        <div class="box-header-right">
            <h3>江岸区周贺蔬菜经营部</h3>
            <div class="no-waring"></div>
            <div class="box-waring-description"></div>
        </div>
        <div class="box-content">
            <!-- <div class="box-content-description">申请立信计划，加入后将在信服委官网上进行公示，并<span class="color">颁发“<span class="fonwt">守信经营承诺单位</span>”荣誉牌匾</span></div> -->
            <div class="box-content-img">
                <!-- <img src="./img/box-content-img.jpg" alt=""> -->
                <h3>江岸区周贺蔬菜经营部</h3>
            </div>
            <div class="box-content-img-des font-size-28">
                牌匾详情：<span>实木材质 30cm * 40cm 可摆可挂 室内室外</span>
            </div>
            <div class="box-content-img-des font-size-28">
                服务内容： <span>立项服务费 + 牌匾（包邮）</span>
            </div>
            <div class="agree" @click="showPop = true">
                <img src="https://statichuoshan.shuidi.cn/shuidiguanjia/img/select.f4bde476.png" alt="">
                同意签署 <span>《守信承诺书》</span>
            </div>
            <div class="box-content-img-des pay-select">
                支付方式: 
                <div class="pay-fang">
                    <!-- {{activeItem}} -->
                    <div class="select-group" @click="changeActive('weiXin')">
                        <div class="icon select-weixin"></div><span>微信</span>
                        <div :class="{ 'selec-active': activeItem === 'weiXin', 'select-icon': true }"></div>
                    </div>
                    <div class="select-group" @click="changeActive('zhiFuBao')">
                        <div class="icon select-zhifubao"></div><span>支付宝</span>
                        <div :class="{ 'selec-active': activeItem === 'zhiFuBao', 'select-icon': true }"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="user-info">
            <div class="info-title">
                <div class="title-left"><h3>邮寄地址</h3><span></span></div>
                <div class="title-right" @click="editorAddr"><span class="editor-icon"></span>修改地址</div>
            </div>
            <div class="show-info">
                <p>{{oldNews?.addr}}</p>
                <p><span>{{oldNews?.name}}</span> <span>{{oldNews?.phone}}</span></p>
            </div>

        </div>
        <div class="box-footer">
            <div class="pay-group">立项服务费：<span class="theme-color fonwt"> ¥ 198 </span></div>
            <!-- <div class="pay-group"></div> -->
            <div class="go-pay-btn">立即领取</div>
        </div>
        <div class="pop-xieyi" v-show="showPop">
            <div class="pop-content">
                <div class="pop-content-des">
                    <h3 class="pop-title">守信承诺书</h3>
                    <p >为促进中小企业信用体系建设，营造良好信用环境，树立信用意识，加强企业自律，我自愿做出以下承诺： 
                        <br>一、遵守法律、法规，依法合规经营。
                        <br>二、践行承诺、履行约定，守信经营。
                        <br>三、保证产品和服务质量，不虚假宣传。 
                        <br>四、尊重消费者合法权益，妥善处理各种纠纷。 
                        <br>五、自愿接受政府、行业组织、消费者监督。
                    </p>
                </div>
            <div class="pop-close-btn" @click="closePop"></div>
            </div>
        </div>
        <div class="pop-xieyi pop-editor" v-show="showAddr">
            <div class="pop-content">
                <h3>
                    填写您的收货地址
                </h3>
                <div class="pop-content-des">
                    <div class="pop-content-des-item">
                        <label for="">收货人</label>
                        <input type="text" placeholder="请输入收货人" v-model="addrNews.name">
                    </div>
                    <div class="pop-content-des-item">
                        <label for="">手机号</label>
                        <input type="text" placeholder="请输入手机号" v-model="addrNews.phone">
                    </div>
                    <div class="pop-content-des-item add-address">
                        <label for="">详细地址</label>
                        <textarea  placeholder="请输入详细地址" v-model="addrNews.addr"></textarea>
                    </div>
                    <div class="pop-buttons">
                        <button class="submit-btn" @click.stop="submitAddr">提交</button>
                        <button class="close-btn" @click.stop="closeAddr">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="welcom-pop" v-show="showWelcome">
            <p>{{ showWelcome }}</p>
            <div class="welcome-content">
                <div class="star"></div>
                <div class="star star1"></div>
                <div class="star star2"></div>
                <div class="welcome-body">
                    <h3>恭喜你被选中众鸿计划</h3>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/main.js"></script>
</body>
</html>